<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./src/css/index.css" />
  </head>

  <body>
    <div class="wrapper">
      <div class="search">
        <input type="text" />
        <span class="btn" sex="m">Male</span>
        <span class="btn" sex="f">Female</span>
        <span class="btn active" sex="a">All</span>
        <!-- Male:<input type='radio' class='btn mBtn' name='sex'></button>
            Female:<input type='radio' class='btn fBtn' name='sex'></button>
            All:<input type="radio" checked='checked' class='btn aBtn' name='sex'></input>  -->
      </div>
      <div class="friendList">
        <ul></ul>
      </div>
    </div>

    <script src="./src/js/filter/filterBySex.js"></script>
    <script src="./src/js/filter/filterByText.js"></script>
    <script src="./src/js/filter/lastFilter.js"></script>
    <script src="./src/js/createStore.js"></script>

    <script>
      // view init
      // 1.
      var personArr = [
        { name: "王港", src: "./src/img/3.png", des: "颈椎不好", sex: "m" },
        { name: "刘莹", src: "./src/img/5.png", des: "我是谁", sex: "f" },
        { name: "王秀莹", src: "./src/img/4.png", des: "我很好看", sex: "f" },
        {
          name: "刘金雷",
          src: "./src/img/1.png",
          des: "你没有见过陌生的脸",
          sex: "m",
        },
        { name: "刘飞翔", src: "./src/img/2.png", des: "瓜皮刘", sex: "m" },
      ];
      var oUl = document.getElementsByTagName("ul")[0];

      // 3. 根据数组内的对象来展示信息条目
      function renderList(arr) {
        var htmlStr = "";
        arr.forEach(function (ele, index) {
          htmlStr +=
            '<li><img src="' +
            ele.src +
            '"/><p class="name">' +
            ele.name +
            '</p><p class="des">' +
            ele.des +
            "</p></li>";
        });
        oUl.innerHTML = htmlStr;
      }

      renderList(personArr);

      // 创建数据仓库
      var store = createStore({
        text: "",
        sex: "a",
      });

      // combine filterByText filterBySex
      function update() {
        renderList(lastFilter(personArr));
      }

      // 订阅
      store.subscribe(update);

      // input
      var oInp = document.getElementsByTagName("input")[0];

      // 防抖
      function debounce(handler, delay) {
        var timer = null;
        return function (e) {
          var _self = this,
            _arg = arguments;
          clearTimeout(timer);
          timer = setTimeout(function () {
            handler.apply(_self, _arg);
          }, delay);
        };
      }

      // 6.
      oInp.oninput = debounce(deal, 500);

      function deal() {
        store.dispatch({ type: "text", text: this.value });
      }

      // 5.过滤数组

      var oRadioArr = Array.prototype.slice.call(
        document.getElementsByClassName("btn"),
        0
      );
      var lastRadio = oRadioArr[oRadioArr.length - 1];
      function changeActive(e) {
        var dom = e.target;
        lastRadio.className = "btn";
        dom.className = "active";
        lastRadio = dom;
      }

      oRadioArr.forEach(function (ele, index) {
        ele.onclick = function (e) {
          changeActive(e);
          store.dispatch({ type: "sex", text: this.getAttribute("sex") });
          // renderList(  lastFilter(personArr) );
        };
      });
    </script>
  </body>
</html>
